<template>
  <div>
    <h1>我是组件</h1>
    <!-- 首层输出的是第一层的评论，parentId为0的数据 -->
    <PostItem
      v-for="item in listData.filter((v) => v.parentId == 0)"
      :item="item"
      :key="item.id"
      :Data="listData" />
  </div>
</template>
<script setup>
import PostItem from "./PostItem.vue";
const listData = [
  {
    id: 1,
    parentId: 0,
    content: "你也配",
    user: "A",
  },
  {
    id: 2,
    parentId: 1,
    content: "我不配，你配?",
    user: "B",
  },
  {
    id: 3,
    parentId: 2,
    content: "下头男，小红书见",
    user: "A",
  },
  {
    id: 4,
    parentId: 0,
    content: "我有50，但是不给你",
    user: "S",
  },
  {
    id: 5,
    parentId: 0,
    content: "年岁岁花相似，岁岁年年v50",
    user: "M",
  },
  {
    id: 6,
    parentId: 5,
    content: "下头男，小红书见",
    user: "A",
  },
  {
    id: 7,
    parentId: 6,
    content: "xxn，你说得对",
    user: "M",
  },
];
</script>
<style></style>
